
/**
 *神经网络。
 *数据直接和 config 耦合（直接和数据索引硬相关），无法扩展
 */

addModule({
	name: "Neural Net",

	config: {
		//左图
		leftLines : [],
		lpos:[],
        line_effect_color : null,     //连线特效颜色
        linestyle_color : null,         //连线颜色
        background_color : null,    //背景颜色
        nodeColor_firstPart : null,      //第一部分散点颜色(位于中心部分的散点)





		//右图
		/**
		 * 圆点的位置信息
		 */
		rightLines: [],
		rpos : [],


		pathSymbol : {},

		symbolSize : null,

		edgeSymbol : [],

		posxys: null,

		duration: 10000,
	},

	graphic: {
		opt: null
	},	

	/**
     * 本模块的初始化函数
	 */
	init : function() {
		// 调用: 将分镜 (子场景入口函数) 全部加到场景列表中去
		addSceneFunc("Neural-net-scene", this.scene1_stage1, this.name, null);
	},

	scene1_stage1 : function() {
		var leftData=[
            {coords:[this.config.lpos[0].value,this.config.lpos[1].value]},
            {coords:[this.config.lpos[0].value,this.config.lpos[2].value]},
            {coords:[this.config.lpos[0].value,this.config.lpos[3].value]},
            {coords:[this.config.lpos[1].value,this.config.lpos[7].value]},
            {coords:[this.config.lpos[1].value,this.config.lpos[8].value]},
            {coords:[this.config.lpos[2].value,this.config.lpos[5].value]},
            {coords:[this.config.lpos[2].value,this.config.lpos[6].value]},
            {coords:[this.config.lpos[3].value,this.config.lpos[4].value]},
            {coords:[this.config.lpos[4].value,this.config.lpos[10].value]},
        ];

        this.config.leftLines = leftData;

        var rightData=[
        	{coords:[this.config.rpos[0].value,this.config.rpos[5].value]},
        	{coords:[this.config.rpos[0].value,this.config.rpos[6].value]},
        	{coords:[this.config.rpos[0].value,this.config.rpos[7].value]},
        	{coords:[this.config.rpos[1].value,this.config.rpos[5].value]},
        	{coords:[this.config.rpos[1].value,this.config.rpos[6].value]},
        	{coords:[this.config.rpos[1].value,this.config.rpos[7].value]},
        	{coords:[this.config.rpos[2].value,this.config.rpos[5].value]},
        	{coords:[this.config.rpos[2].value,this.config.rpos[6].value]},
        	{coords:[this.config.rpos[2].value,this.config.rpos[7].value]},
        	{coords:[this.config.rpos[3].value,this.config.rpos[5].value]},
        	{coords:[this.config.rpos[3].value,this.config.rpos[6].value]},
        	{coords:[this.config.rpos[3].value,this.config.rpos[7].value]},
        	{coords:[this.config.rpos[4].value,this.config.rpos[5].value]},
        	{coords:[this.config.rpos[4].value,this.config.rpos[6].value]},
        	{coords:[this.config.rpos[4].value,this.config.rpos[7].value]},


        	{coords:[this.config.rpos[5].value,this.config.rpos[8].value]},
        	{coords:[this.config.rpos[5].value,this.config.rpos[9].value]},
        	{coords:[this.config.rpos[5].value,this.config.rpos[10].value]},
        	{coords:[this.config.rpos[5].value,this.config.rpos[11].value]},
        	{coords:[this.config.rpos[5].value,this.config.rpos[12].value]},
        	{coords:[this.config.rpos[6].value,this.config.rpos[8].value]},
        	{coords:[this.config.rpos[6].value,this.config.rpos[9].value]},
        	{coords:[this.config.rpos[6].value,this.config.rpos[10].value]},
        	{coords:[this.config.rpos[6].value,this.config.rpos[11].value]},
        	{coords:[this.config.rpos[6].value,this.config.rpos[12].value]},
        	{coords:[this.config.rpos[7].value,this.config.rpos[8].value]},
        	{coords:[this.config.rpos[7].value,this.config.rpos[9].value]},
        	{coords:[this.config.rpos[7].value,this.config.rpos[10].value]},
        	{coords:[this.config.rpos[7].value,this.config.rpos[11].value]},
        	{coords:[this.config.rpos[7].value,this.config.rpos[12].value]},

        ];

        this.config.rightLines = rightData;



		var series = [{//左图
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            symbol:['circle','circle'],
            symbolSize:10,
            xAxisIndex: 0,
            yAxisIndex: 0,
            effect: {
                show: true,
                period: 1.5,
                trailLength: 0.7,
                color: this.config.line_effect_color,
                symbolSize: 5
            },
            lineStyle: {
                normal: {
                    color: this.config.linestyle_color,
                    width: 1,
                    curveness: 0
                }
            },
            data: this.config.leftLines,
            animationDelay: function (idx) {
                return idx * 10 ;
            }
        },{
            type:'graph',
            coordinateSystem: 'cartesian2d',
            data: this.config.lpos,
            symbolSize:30,
            itemStyle:{
                    color:this.config.nodeColor_firstPart
            },
            animationDelay: function (idx) {
                return idx * 10 ;
            }
        },{//右图
        	type: 'lines',
            coordinateSystem: 'cartesian2d',
            symbol:['circle','circle'],
            symbolSize:10,
            xAxisIndex: 1,
            yAxisIndex: 1,
            effect: {
                show: true,
                period: 1.5,
                trailLength: 0.7,
                color: this.config.line_effect_color,
                symbolSize: 5
            },
            lineStyle: {
                normal: {
                    color: this.config.linestyle_color,
                    width: 1,
                    curveness: 0
                }
            },
            data: this.config.rightLines,
            animationDelay: function (idx) {
                return idx * 10 ;
            }
        },{
            type:'graph',
            coordinateSystem: 'cartesian2d',
            data: this.config.rpos,
            symbol: this.config.pathSymbol.symbol,
            symbolSize: this.config.symbolSize,
            xAxisIndex: 1,
            yAxisIndex: 1,
            animationDelay: function (idx) {
                return idx * 10 ;
            }
        }];

		var option = {
			title: {},
			tooltip: {
				trigger: 'item'
			},
			xAxis: [
				{gridIndex: 0, min: 0, max: 80, show: false},
        		{gridIndex: 1, min: 0, max: 100, show: false},
			],
			yAxis: [
				{gridIndex: 0, min: 0, max: 80, show: false},
        		{gridIndex: 1, min: 0, max: 100, show: false},
			],
			grid: [
        		{
        			x: '7%', 
        			y: '7%', 
        			width: '38%', 
        			height: 'auto', 
        			show: false
        		},
        		{
        			x2: '7%', 
        			y: '7%', 
        			width: '38%', 
        			height: 'auto', 
        			show: false
        		},
			],
			series: series


		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);


		//小球部分
		var N = 5;// 随机小球数量

		var particles1 = new Array();
		var particles2 = new Array();

		for (var i = 0; i < N; i++) {
			var r = 10;// 小球大小

			var opacity = Math.random() * 0.5 + 0.5;

			// 蓝点	
			var particle1 = new echarts.graphic.Circle({
				xAxisIndex: 0,
            	yAxisIndex: 0,
				shape: {
					cx: Math.floor(Math.random()*(500-300+1)+300), //300~500
					cy: Math.floor(Math.random()*(200-150+1)+150), //150~200
					r: r
				},
				style: {
					fill: this.config.nodeColor_firstPart,
					opacity: opacity
				},
				silent: true
			});

			// 红点
			var particle2= new echarts.graphic.Circle({   
				shape: {
					cx: Math.floor(Math.random()*(1300-800+1)+800), //800~1300
					cy: 725,
					r: r
				},
				style: {
					fill: 'red',
					opacity: opacity
				},
				silent: true
			});

            zr.configLayer(0, {
                motionBlur: false,
            });

			//蓝点动画
			particle1.animate('shape', true)
				.when(2500+Math.random()*2000, {
					cx: Math.floor(Math.random()*(1300-800+1)+800), //800~1300
					cy:100
				})
				.done(function () {
					zr.remove(particle1);
				})
				.start('cubicIn');

			//红点动画
			particle2.animate('shape', true)
				.when(2500+Math.random()*2000, {
					cx: Math.floor(Math.random()*(500-300+1)+300),
					cy: 650
				})
				.done(function () {
					zr.remove(particle2);
				})
				.start('cubicIn');

			zr.add(particle1);
			particles1.push(particle1);

			zr.add(particle2);
			particles2.push(particle2);
		}


		this.graphic.particles1 = particles1;
		this.graphic.particles2 = particles2;

		addRenderFunc(this.name + "-end",function(){
			var len1 = this.graphic.particles1.length;
			var len2 = this.graphic.particles2.length;


			for (var i = 0; i < len1; i++) {
				var particle1 = this.graphic.particles1[i];
				zr.remove(particle1); // 需要移除所有小球
			}

			for (var i = 0; i < len2; i++) {
				var particle2 = this.graphic.particles2[i];
				zr.remove(particle2); // 需要移除所有小球
			}
            myChart.clear();
			endScene();

		},{
		   once : true,
		   delay : this.config.duration
		});
		
	}

});